<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>注册</title>
    <style>
        body {
            width: 100%;
            background-image: url("images/chuli.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0;
            text-align: center;
        }

        body > div {
            background-color: rgba(0, 255, 255, 0.1);
            width: 60%;
            margin: 0 auto;
            text-align: center;
        }

        form {
            margin: 0 auto;
            width: 100%;
        }

        input {
            width: 30%;
            height: 30px;
            border-radius: 5%;
            text-align: left;
            margin: 10px auto;
            font-size: 24px;
            display: block;

        }
    </style>
</head>
<body>
<div>
    <h2 style="font-size: 48px">用户注册</h2>
    <el-card style="width: 80%; height:20%; margin: 0 auto;background-color:rgba(0,255,255,0.2);padding-top: 50px">
        <el-form style="width: 80%;margin: 0 5%; " label-width="60px" label-position="left">
            <el-form-item  style="font-size: 24px;color: black">
                <el-input type="text" v-model="user.username" placeholder="请输入用户名"style="font-size: 20px;color: black">
                </el-input>
            </el-form-item>
            <el-form-item  style="font-size: 24px;color: black">
                <el-input type="password" v-model="user.password" placeholder="请输入密码"style="font-size: 20px;color: black">
                </el-input>
            </el-form-item>
            <el-form-item  style="font-size: 24px;color: black">
                <el-input type="text" v-model="user.nick" placeholder="请输入昵称"style="font-size: 20px;color: black">

                </el-input>
            </el-form-item>
            <el-form-item  style="font-size: 24px;color: black">
                <el-input type="text" v-model="user.phone" placeholder="请输入联系方式"style="font-size: 20px;color: black">
                </el-input>
            </el-form-item>
            <el-form-item @keydown.native.enter="login()" style="margin-top:30px;margin-left: 0%">
                <el-button style="width: 80px;height: 50px;font-size: 20px" @click="insert()" >注册
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
    let v = new Vue({
        el: "body>div",
        data: {
            user: {
                username: "",
                password: "",
                phone: "",
                nick:""
            },
        },
        methods: {
    insert() {
                if (this.user.password.length<6){
                 v.$message.warning("密码长度最少6位")
                 v.user.phone="";
                 v.user.username="";
                 v.user.nick="";
                 v.user.password=""
                }else if (!rule.test(this.user.phone)){
                    v.$message.warning("手机号码格式不正确!")
                    v.user.phone="";
                    v.user.username="";
                    v.user.nick="";
                    v.user.password=""
                }else {
                    axios.post("/insert", v.user).then(function (response) {
                        if (response.data == 1) {
                            v.$message.success("注册成功!")
                            setTimeout(function () {
                                location.href = "/login.html"
                            }, 1000)
                        } else if (response.data == 2) {
                            v.$message.error("用户已存在!")
                            setTimeout(function () {
                                location.reload()
                            }, 1000)
                        } else {
                            v.$message.error("请输入正确的信息")
                            setTimeout(function () {
                                location.reload()
                            }, 1000)
                        }
                    })
                }
            }
        }
    })
</script>
</body>
</html>